<template>
    <div
        class="risk-container"
        ref="svgMain"
    >
        <div class="searchBar">
            <el-input placeholder="请输入查询sql语句" clearable="true" v-model="cql"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </div>
        <div class="color-bar" >
            <div>
                <el-button type="primary">极低风险</el-button>
                <el-button type="success">低风险</el-button>
                <el-button type="warning">较高风险</el-button>
                <el-button type="danger">高风险</el-button>
            </div>
            <div >
                <div style="display: flex;padding-bottom: 5px;">
                    <h3>产业链风险值: 0.837</h3>

                </div>
                <div style="display: flex;padding-bottom: 5px;"><h3>原材料价格波动: </h3> <el-tag type="danger">异常</el-tag></div>
                <div style="display: flex;padding-bottom: 5px;"><h3>ETF波动:</h3><el-tag type="success">正常</el-tag></div>
                <div style="display: flex;padding-bottom: 5px;"><h3>产品营收额:</h3> <el-tag type="success">正常</el-tag></div>
            </div>

        </div>
        <div class="graph-container"
             v-loading="loading"
             element-loading-text="图谱加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(255, 255, 255, 0.8)" >
            <RiskGraph :graph-data="graphData" ref="graph" :link-types="linkTypes" :labels="labels" :names="names"></RiskGraph>
        </div>
        <el-dialog
            :visible.sync="dialogVisible"
            width="40%"
            class="product-dialog"
            @close="handleDialogClose"
        >
            <div  v-loading="dialogLoading"
                  element-loading-text="风险数据加载中...."
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(255, 255, 255, 0.8)">
            <div style="display: flex;align-items: center">
                <el-image style="width: 50px;height: 50px" :src="require('../../assets/img/company.png')"></el-image>
                <h2>{{chooseCompany}}</h2>
                <div style="margin-left: 10px">
                    <el-tag style="font-size: 18px"  v-if="companyRisk<1.81" type="danger" size="medium">极高风险</el-tag>
                    <el-tag style="font-size: 18px" v-if="companyRisk>=1.81 && companyRisk<2.675" type="warning" size="medium">较高风险</el-tag>
                    <el-tag style="font-size: 18px" v-if="companyRisk>=2.675 && companyRisk<2.99" type="success" size="medium">低风险</el-tag>
                    <el-tag style="font-size: 18px" v-if="companyRisk>=2.99" size="medium">极低风险</el-tag>
                </div>
                <div style="margin-left: 50px">
                    <el-tooltip class="item" effect="dark" placement="top-start">
                        <div slot="content">
                            图论中，割点也称为“关键节点”或“割断点”，<br/>
                            是指一个无向图中，如果将该节点从图中移除后，<br/>
                            会导致原本连通的图不再连通。<br/>
                            即该节点对于图的连通性起到了至关重要的作用。<br/>
                            该节点消失后产业链连通性发生变化。<br/>
                        </div>
                        <el-link>什么是关键点</el-link>
                    </el-tooltip>
                </div>
            </div>
                <el-tabs v-model="activeName" stretch>
                    <el-tab-pane label="产品分析" name="product">
                        <el-table
                            :data="productData"
                            stripe
                            style="width: 100%"
                            height="430"
                        >
                            <el-table-column
                                type="index"
                                label="序号"
                                align="center"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="properties.name"
                                label="产品名称"
                                align="center">
                            </el-table-column>
                            <!--                <el-table-column-->
                            <!--                    label="风险等级"-->
                            <!--                    align="center"-->
                            <!--                >-->
                            <!--                    <template slot-scope="scope">-->
                            <!--                        <el-tag type="success" v-if="scope.row.properties.grade ==='1'">安全</el-tag>-->
                            <!--                        <el-tag type="success" v-else-if="scope.row.properties.grade ==='2'">安全</el-tag>-->
                            <!--                        <el-tag type="warning" v-else-if="scope.row.properties.grade ==='3'">警告</el-tag>-->
                            <!--                        <el-tag type="warning" v-else-if="scope.row.properties.grade ==='4'">危险</el-tag>-->
                            <!--                    </template>-->
                            <!--                </el-table-column>-->
                            <el-table-column label="是否为关键点" align="center">
                                <template slot-scope="scope">
                                    <el-tag type="danger" v-if="scope.row.properties.articulationStatus ===1">是</el-tag>
                                    <el-tag type="info" v-else-if="scope.row.properties.articulationStatus ===0">否</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="操作"
                                align="center"
                            >
                                <template slot-scope="scope">
                                    <el-button :disabled="scope.row.properties.articulationStatus===0?true:false" type="primary" size="mini" @click="showAnalysisDrawer(scope.row)">风险预测</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="可替代公司" name="company">
                        <template v-if="replaceCompany.length !==0">
                            <el-table  :data="replaceCompany"
                                       stripe
                                       style="width: 100%"
                                       height="430">
                                <el-table-column type="index" label="序号">
                                </el-table-column>
                                <el-table-column label="名称">
                                    <template slot-scope="scope">
                                        {{scope.row.properties.name}}
                                    </template>
                                </el-table-column>
                                <el-table-column label="风险等级">
                                    <template slot-scope="scope">
                                        <el-tag style="font-size: 18px"  v-if="scope.row.properties.risk<1.81" type="danger">极高风险</el-tag>
                                        <el-tag style="font-size: 18px" v-if="scope.row.properties.risk>=1.81 && scope.row.properties.risk<2.675" type="warning">较高风险</el-tag>
                                        <el-tag style="font-size: 18px" v-if="scope.row.properties.risk>=2.675 && scope.row.properties.risk<2.99" type="success">低风险</el-tag>
                                        <el-tag style="font-size: 18px" v-if="scope.row.properties.risk>=2.99" >极低风险</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="主营业务"
                                >
                                    <template slot-scope="scope">
                                        {{scope.row.properties.main_operation_business}}
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                        <template v-else>
                            <div style="display: flex;flex-direction: column;align-items: center;justify-content: center">
                                <el-image style="width: 100px;height: 100px" :src="require('../../assets/img/replaceComplace.png')"></el-image>
                                <h2>
                                    暂无该公司的替代公司
                                </h2>
                            </div>

                        </template>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-dialog>
        <el-drawer  v-loading="drawerLoading"
                        element-loading-text="产品断链分析中..."
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(255, 255, 255, 0.8)"	:withHeader="false" destory-on-close :visible.sync="drawerVisible" direction="rtl" size="45%">
            <ProductAnalysis

                v-if="drawerVisible" :after-graph-data="beforeGraphData" :before-graph-data="afterGraphData" :product-name="productName"></ProductAnalysis>
        </el-drawer>
    </div>
</template>

<script>
import RiskGraph from '@/page/risk/component/RiskGraph.vue';
import {
    getCompanyProduct,
    getCompanyRisk,
    getLocalProductLink,
    getNodeRelationGraph, searchCompanyByCql
} from '@/api/graphData';
import ProductAnalysis from "@/page/risk/component/ProductAnalysis.vue";
import {getCompanyGraph, searchCompanyGraphByCql} from "@/api/risk";

export default {
    name: 'Index',
    components: {ProductAnalysis, RiskGraph },
    mounted() {
        this.svgHeight = this.$refs.svgMain.offsetHeight;
        this.svgWidth = this.$refs.svgMain.offsetWidth;
        this.getGraphData()

        // 监听查看节点产品事件
        this.$bus.$on("checkCompanyProduct",async (data)=>{
            let nodeName=data.node.properties.name
            this.chooseCompany = nodeName
            this.dialogVisible = true
            this.dialogLoading=true
            await getCompanyProduct(nodeName).then((response)=>{
                 this.productData=response.data.data.node
             }).catch((err)=>{
                 console.log(err)
             })
            await getCompanyRisk(nodeName).then((response)=>{
                let data = response.data.data
                if (data.replaceCompany !== null){
                    this.replaceCompany=data.replaceCompany
                }
                this.companyRisk=data.risk
            }).catch((err)=>{
                console.log(err)
            })
            this.dialogLoading=false
        })
    },
    data() {
        return {
            graphData: {
                nodes: [],
                links: []
            },
            names: ['公司名称', '工业', '产品', '国家'],
            labels: ['company', 'industry', 'product', 'holdCompany'],
            linkTypes: ['', 'suoshuhangye', 'zhuyingchanpin', 'chanpinxiaolei', 'shangyoucailiao'],
            loading: false,
            cql: '',
            dialogVisible:false,
            productData: [],
            drawerVisible:false,
            chooseCompany:"",
            productName:"",
            beforeGraphData:{
                nodes:[],
                links:[]
            },
            afterGraphData:{
                nodes:[],
                links:[]
            },
            drawerLoading:false,
            replaceCompany:[],
            companyRisk:0,
            dialogLoading:false,
            activeName:"product"
        };
    },
    methods: {
        async getGraphData() {
            this.loading=true
            await getCompanyGraph().then((response) => {
                let data= response.data.data
                this.graphData.nodes=data.node
                this.graphData.links=data.relationship
                console.log(this.graphData)
                })
                .catch((err) => {
                    console.log(err);
                });
            // 4.绘制图谱
            this.$refs.graph.d3init();
            this.loading = false;
        },
        // 查看风险分析
        async showAnalysisDrawer(nodeData){
            this.dialogVisible=false;
            setTimeout(()=>{
                this.drawerVisible=true
            },400)
            this.productName=nodeData.properties.name
            this.drawerLoading=true
            await getLocalProductLink(nodeData.properties.name).then((response)=>{
                let data=response.data.data
                this.beforeGraphData.nodes=data.afterNode
                this.beforeGraphData.links=data.afterRel
                this.afterGraphData.nodes=data.beforeNode
                this.afterGraphData.links=data.beforeRel
            }).catch((err)=>{
            })
            this.drawerLoading=false

        },
        handleDialogClose(){
            this.dialogVisible=false
            this.chooseCompany=""
            this.replaceCompany=[]
            this.companyRisk=""
            this.productData=[]
        },
        async handleSearch(){
            if (this.cql===""){
                return
            }
            this.loading=true
            await searchCompanyGraphByCql({cql: this.cql}).then((response)=>{
                let data= response.data.data
                this.graphData.nodes=data.node
                this.graphData.links=data.relationship
            }).catch((err)=>{
                console.log(err)
            })
            this.$refs.graph.d3init();
            this.loading = false;
        }
    }
};
</script>

<style scoped>
.risk-container {
    position: relative;
    height: 100%;
    width: 100%;
}
.graph-container {
    width: 100%;
    height: 100%;
}
.searchBar {
    position: absolute;
    width: 500px;
    margin-top: 10px;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.color-bar{
    position: absolute;
    width: 500px;
    right: 10px;
    margin-top: 10px;
    margin-left: 10px;
    display: flex;
    align-items: end;
    justify-content: center;
    flex-direction: column;
}
.product-dialog{
    padding: 10px 10px;
}
</style>
